可选参数和默认参数

在 TypeScript 中，函数参数可以设置为可选的，也可以为参数提供默认值。这些特性使得函数更加灵活，能够适应不同的使用场景。本教程将详细介绍如何在 TypeScript 中使用可选参数和默认参数。

1. 可选参数

可选参数是指在调用函数时，某些参数可以省略。在 TypeScript 中，通过在参数名后添加问号 ? 来标记一个参数为可选参数。

1.1 理论解释

可选参数必须放在必选参数的后面。这是因为如果可选参数放在必选参数前面，编译器无法确定哪些参数是可选的，哪些是必选的。

1.2 代码示例

function greet(name: string, greeting?: string): string {
    if (greeting) {
        return `${greeting}, ${name}!`;
    } else {
        return `Hello, ${name}!`;
    }
}

console.log(greet("Alice")); // 输出: Hello, Alice!
console.log(greet("Bob", "Hi")); // 输出: Hi, Bob!

1.3 实践练习

编写一个函数 calculateArea，该函数接受两个参数：width 和 height。height 是可选参数，如果省略 height，则函数返回正方形的面积。

function calculateArea(width: number, height?: number): number {
    if (height) {
        return width * height;
    } else {
        return width * width;
    }
}

console.log(calculateArea(5)); // 输出: 25
console.log(calculateArea(5, 10)); // 输出: 50

2. 默认参数

默认参数是指在调用函数时，如果某个参数没有传递值，则使用预定义的默认值。在 TypeScript 中，可以通过在参数声明时直接赋值来设置默认参数。

2.1 理论解释

默认参数可以放在必选参数的后面，也可以放在可选参数的后面。默认参数的值在调用函数时如果没有传递，则会使用默认值。

2.2 代码示例

function greetWithDefault(name: string, greeting: string = "Hello"): string {
    return `${greeting}, ${name}!`;
}

console.log(greetWithDefault("Alice")); // 输出: Hello, Alice!
console.log(greetWithDefault("Bob", "Hi")); // 输出: Hi, Bob!

2.3 实践练习

编写一个函数 calculateVolume，该函数接受三个参数：length、width 和 height。width 和 height 都有默认值 1。

function calculateVolume(length: number, width: number = 1, height: number = 1): number {
    return length * width * height;
}

console.log(calculateVolume(5)); // 输出: 5
console.log(calculateVolume(5, 2)); // 输出: 10
console.log(calculateVolume(5, 2, 3)); // 输出: 30

3. 结合使用可选参数和默认参数

在实际开发中，可选参数和默认参数可以结合使用，以提供更大的灵活性。

3.1 理论解释

当一个参数既是可选的又有默认值时，如果调用函数时没有传递该参数，则使用默认值。

3.2 代码示例

function greetAdvanced(name: string, greeting: string = "Hello", punctuation?: string): string {
    if (punctuation) {
        return `${greeting}, ${name}${punctuation}`;
    } else {
        return `${greeting}, ${name}!`;
    }
}

console.log(greetAdvanced("Alice")); // 输出: Hello, Alice!
console.log(greetAdvanced("Bob", "Hi")); // 输出: Hi, Bob!
console.log(greetAdvanced("Charlie", "Hey", "?")); // 输出: Hey, Charlie?

3.3 实践练习

编写一个函数 formatDate，该函数接受三个参数：year、month 和 day。month 和 day 都有默认值 1。

function formatDate(year: number, month: number = 1, day: number = 1): string {
    return `${year}-${month}-${day}`;
}

console.log(formatDate(2023)); // 输出: 2023-1-1
console.log(formatDate(2023, 10)); // 输出: 2023-10-1
console.log(formatDate(2023, 10, 15)); // 输出: 2023-10-15

4. 总结

通过本教程，我们学习了如何在 TypeScript 中使用可选参数和默认参数。可选参数使得函数调用更加灵活，而默认参数则简化了函数的使用。结合使用这两种特性，可以编写出更加强大和易用的函数。

5. 下一步

接下来，你可以尝试在实际项目中应用这些概念，编写更加复杂的函数，并探索 TypeScript 的其他高级特性，如函数重载、剩余参数等。继续学习和实践，你将能够编写出更加健壮和高效的 TypeScript 代码。